<template>
  <div class="search">
    <div class="search-head">
        <div class="search_top">
          <div class="back_img" @click="back"><img src="../../assets/images/icon-back.png" alt=""></div>
          <div class="search_cen">
              <input type="text" name="search" placeholder="搜索商品名称">
          </div>
          <div class="search_rig">
              <img src="../../assets/images/zoom.png" alt="">
          </div>
        </div>
        <div class="search_bottom">
          <div v-for="(item, index) in active" :key="index" @click="act(index)" :class="{'active': index == num}">{{item}}</div>
        </div>
    </div>
    <div class="item">
      <div class="item_goods" v-for="(item, index) in search" :key="index">
        <router-link 
            :to="{path:'/detail',
            query:{ //params
                    id:item.id,
                }}">
          <div class="item_l">
            <img :src="item.url" alt="">
          </div>
          <div class="item_r">
            <h3 class="name">{{item.title}}</h3>
            <span class="desc">{{item.desc}}</span>
            <div class="plice">￥<span>{{item.price}}</span>元</div>
            <div class="sales">销量:{{item.sales}} 100%满意</div>
          </div>
        </router-link>
      </div>
    </div>
    <re-goods></re-goods>
  </div>
</template>

<script>
import ReGoods from '../ReGoods.vue'
import axios from 'axios'
export default {
  components: { ReGoods },
  name:'SearchView',
  data() {
    return {
      searchitem:[],
      search:[],
      active:['综合','销量','价格升序','价格降序'],
      num:0,
    }
  },
  methods: {
      back(){
        this.$router.go(-1)
      },
      act(e){
        let total = this.$route.query.total
        this.num = e
        if(e == 0){
          this.search = JSON.parse(localStorage.getItem('searchitem'))
        }else{
          axios.get(`http://localhost:3000/search?title=${total}&num=${e}`).then(
            response => {
                this.search = response.data.list
            },
            error =>{
                console.log('error');
            }
          )
        }
      }
    },
    mounted() {
      let index = this.$route.query.id
      let total = localStorage.getItem('total')
      axios.get(`http://localhost:3000/search?title=${total}`).then(
        response => {
            let search = this.search = response.data.list
            if(index){
              let search1 = search[index]
              search[index] = search[0]
              search[0] = search1
              this.search = search
              localStorage.setItem('searchitem',JSON.stringify(this.search))
            }else{
              localStorage.setItem('searchitem',JSON.stringify(this.search))
            }
        },
        error =>{
            console.log(error);
        }
      )
  },
}

</script>

<style scoped>
  .search{
  background-color: #fff;
}
.search-head {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fafafa;
}
.search_top {
  display: flex;
  height: 1.8rem;
  justify-content: space-around;
  align-items: center;
}
.back_img {
    width: 2rem;
    text-align: center;
    padding: .12rem;
}

.back_img img {
    width: 1.5rem;
}

.search_cen {
    flex-grow: 1;
    color: #111;
}
.search input {
    width: 98%;
    height: 1.08rem;
    padding: 0.3rem ;
    border: 0.04rem solid #e1e1e1;
    border-radius: 0.08rem;
    font-size: 0.6rem;
}
.search_rig{
  padding: .32rem .4rem .2rem .1rem;
}
.search_rig img{
  width: 1.2504rem;
  height: 1.2504rem;
}
.search_bottom {
  display: flex;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  font-size: .584rem;
  color: rgba(0,0,0,.54);
  margin-right: .3rem;
}
.search_bottom div{
  flex: 1;
}
.item {
  margin-top: 3.3rem;
}
.item_goods a{
  width: 100%;
  display: flex;
  padding: .584rem .32rem;
  border-bottom: .04rem solid #d9d9d9;
}
.item_l img {
  width: 5.2rem;
  height: 5.2rem;
}
.item_r{
  margin-left: .4rem;
  padding-top: .4rem;
  color: #000;
}
.item_r .name {
  width: 8.52rem;
  height: .8rem;
  overflow: hidden;
  line-height: .8rem;
  font-size: .584rem;
  margin-bottom: .2rem;
}
.item_r>span {
  /* display: inline-block; */
  overflow: hidden;
  width: 8.52rem;
  height: 1.2rem;
  font-size: .48rem;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: rgba(0,0,0,.54);

}
.item_r .plice {
  margin: .16rem 0;
  height: .872rem;
  line-height: .872rem;
  font-size: .5rem;
  color: #ff6700;
}
.item_r .plice span {
  font-size: .75rem;
}
.item_r .sales {
  font-size: .48rem;
  color: rgba(0,0,0,.54);
}
.active {
  color: #ff6700;
}
</style>